<template>
    <div id="app">

        <Slider :slides="slides" :announcement="announcement"></Slider>

        <div class="section">
            <Booklist @select="preview($event)" heading="最新更新~" :books="lastUpdated"></Booklist>
        </div>
        <div class="section">
            <Booklist @select="preview($event)" heading="小编推荐" :books="recommended"></Booklist>
        </div>
        <modal-dialog ref="dialog">
            <div slot="heading"></div>
            <div>
                <div v-if="selected">
                    <h2>{{ selected.title }}</h2>
                </div>
            </div>
            <div class="cover">
                <img :src="selected.img_url"/>
            </div>
            <div class="title">{{ selected.title }}</div>
            <div class="authors">{{ selected.authors}}</div>
            <div>
            </div>
        </modal-dialog>
    </div>
</template>

<script type="text/ecmascript-6">
    import Booklist from "./components/Booklist.vue"
    import Slider from "./components/Slider.vue"
    import ModalDialog from './components/dialog.vue'
    export default {
        components: {Booklist, Slider,ModalDialog},
        name: 'app',
        data () {
            return {
                lastUpdated: [],
                recommended: [],
                slides: [],
                announcement:'',
                selected:''
            }
        },
        mounted(){
            document.title = "Book store"
        },
        created(){
            console.log("created:data received");
            this.$http.get('/src/data.json').then(res => {
                this.announcement = res.body.announcement;
                this.slides = res.body.slides;
                this.recommended = res.body.recommended;
                this.lastUpdated = res.body.lastUpdated;
            })
        },
        methods: {
            xxx(book){
                alert("Book name:" + book.title + "\nBook id:" + book.id + "\nBook authors:" + book.authors);
            },
            preview (book) {
                this.selected = book
                this.$refs.dialog.open()
            }
        },

    }
</script>

<style>

</style>
